使用 Webpack 打造 vue - todo 应用实践（ 三）

这篇是第三篇了

今天我们主要是完善一下项目开发之前的配置

使用 Webpack 打造 vue - todo 应用实践（ 一）
使用 Webpack 打造 vue - todo 应用实践（ 二）

安装

 cnpm install postcss-loader babel-loader babel-core autoprefixer --save-dev
 cnpm install babel-preset-env babel-plugin-transform-vue-jsx --save-dev
 cnpm install --save-dev babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx --sav
e-dev

目录补充

增加了
- postcss.config.js
- .babelrc

代码完善

// postcss.config.js
const autoprefixer = require('autoprefixer');

// stylus编译成css后，再优化css代码
// autoprefixer 给CSS代码自动添加不同浏览器的前缀
module.exports = {
    plugins: [
        autoprefixer()
    ]
};

// .babelrc
// 通过babel将一些浏览器不能运行的js处理为浏览器中能跑的js代码
{
  "presets": [
    "env"
  ],
  "plugins": [
    "transform-vue-jsx"
  ]
}

// webpack.config.js
const path = require('path')
const isDev = process.env.NODE_ENV === 'development'
const htmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const config = {
  mode: 'development',
  target: 'web',
  entry: path.join(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 30000,
              name: '[name]-[hash].[ext]'
            }
          }
        ]
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',        // 【todo】添加了postcss处理
            options: {
              sourceMap: true
            }
          },
          'stylus-loader'
        ]
      }
    ]
  },
  plugins:[
    new htmlWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"' 
      }
    })
  ]
}
if (isDev) {
  config.devServer = {
    port: 8000,
    host: 'localhost',
    overlay: {
      error: true
    },
    open: true,
    hot: true
  }
  
  config.plugins.push(
    // 这些插件的作用是，热跟新模式下，如果修改了代码，那么试图会无刷新重新渲染
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
}

module.exports = config; 

// 顺便附带一下
// package.json
{
  "name": "vue-webpack-todo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"
  },
  "author": "itPoet",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.3",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.5.1",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.4",
    "postcss-loader": "^2.1.1",
    "style-loader": "^0.20.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^14.1.1",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^4.1.0"
  },
  "devDependencies": {
    "cross-env": "^5.1.3",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  }
}

运行

npm run dev

未完待续~！~下一篇主要是我们的业务代码了